<template>
  <div class="review-center">
    <el-row :gutter="20">
      <el-col :span="16">
        <el-card class="review-summary">
          <template #header>
            <div class="card-header">
              <span>评价反馈概览</span>
              <el-button type="primary" @click="refreshData">刷新</el-button>
            </div>
          </template>

          <div class="summary-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="summary-item">
                  <div class="item-icon" style="background-color: #f56c6c;">
                    <el-icon><Star /></el-icon>
                  </div>
                  <div class="item-info">
                    <div class="item-value">{{ courseReviewCount }}</div>
                    <div class="item-label">课程评价</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="summary-item">
                  <div class="item-icon" style="background-color: #409eff;">
                    <el-icon><User /></el-icon>
                  </div>
                  <div class="item-info">
                    <div class="item-value">{{ coachRatingCount }}</div>
                    <div class="item-label">教练评分</div>
                  </div>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="summary-item">
                  <div class="item-icon" style="background-color: #67c23a;">
                    <el-icon><Comment /></el-icon>
                  </div>
                  <div class="item-info">
                    <div class="item-value">{{ feedbackCount }}</div>
                    <div class="item-label">意见反馈</div>
                  </div>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <el-card class="recent-reviews">
          <template #header>
            <div class="card-header">
              <span>最新评价</span>
              <el-button link type="primary" @click="goToCourseReviewList">查看更多</el-button>
            </div>
          </template>

          <div class="reviews-list">
            <div
              v-for="review in recentReviews"
              :key="review.id"
              class="review-item"
            >
              <div class="item-header">
                <span class="item-user">{{ review.user.name }}</span>
                <el-rate
                  v-model="review.rating"
                  disabled
                  size="small"
                />
              </div>
              <div class="item-content">{{ review.content }}</div>
              <div class="item-meta">
                <span>{{ formatTime(review.createdAt) }}</span>
                <el-tag :type="getStatusTagType(review.status)">
                  {{ formatStatus(review.status) }}
                </el-tag>
              </div>
            </div>

            <div v-if="recentReviews.length === 0" class="empty">
              暂无评价
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :span="8">
        <el-card class="feedback-summary">
          <template #header>
            <div class="card-header">
              <span>意见反馈统计</span>
              <el-button link type="primary" @click="goToFeedbackList">查看更多</el-button>
            </div>
          </template>

          <div class="feedback-stats">
            <div class="stat-item">
              <div class="stat-label">待处理</div>
              <div class="stat-value" style="color: #e6a23c;">{{ pendingFeedbackCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">处理中</div>
              <div class="stat-value" style="color: #409eff;">{{ processingFeedbackCount }}</div>
            </div>
            <div class="stat-item">
              <div class="stat-label">已解决</div>
              <div class="stat-value" style="color: #67c23a;">{{ resolvedFeedbackCount }}</div>
            </div>
          </div>

          <div class="feedback-types">
            <div class="type-item">
              <div class="type-label">
                <el-tag type="danger">BUG</el-tag>
              </div>
              <div class="type-count">{{ bugFeedbackCount }}</div>
            </div>
            <div class="type-item">
              <div class="type-label">
                <el-tag type="success">功能建议</el-tag>
              </div>
              <div class="type-count">{{ featureFeedbackCount }}</div>
            </div>
            <div class="type-item">
              <div class="type-label">
                <el-tag type="warning">投诉</el-tag>
              </div>
              <div class="type-count">{{ complaintFeedbackCount }}</div>
            </div>
            <div class="type-item">
              <div class="type-label">
                <el-tag>建议</el-tag>
              </div>
              <div class="type-count">{{ suggestionFeedbackCount }}</div>
            </div>
          </div>
        </el-card>

        <el-card class="featured-reviews">
          <template #header>
            <div class="card-header">
              <span>精选评价</span>
              <el-button link type="primary" @click="goToReviewList">查看更多</el-button>
            </div>
          </template>

          <div class="reviews-list">
            <div
              v-for="review in featuredReviews"
              :key="review.id"
              class="review-item"
            >
              <div class="item-header">
                <div class="user-info">
                  <el-avatar :src="review.user.avatar" size="small" />
                  <span class="user-name">{{ review.user.name }}</span>
                </div>
                <el-rate
                  v-model="review.rating"
                  disabled
                  size="small"
                />
              </div>
              <div class="item-content">{{ review.content }}</div>
              <div class="item-meta">
                <span>{{ formatTime(review.createdAt) }}</span>
                <el-tag type="success">精选</el-tag>
              </div>
            </div>

            <div v-if="featuredReviews.length === 0" class="empty">
              暂无精选评价
            </div>
          </div>
        </el-card>

        <el-card class="quick-actions">
          <template #header>
            <div class="card-header">
              <span>快捷操作</span>
            </div>
          </template>

          <div class="actions-grid">
            <div class="action-item" @click="goToCourseReviewList">
              <div class="item-icon" style="background-color: #f56c6c;">
                <el-icon><Star /></el-icon>
              </div>
              <div class="item-label">课程评价</div>
            </div>
            <div class="action-item" @click="goToCoachRatingList">
              <div class="item-icon" style="background-color: #409eff;">
                <el-icon><User /></el-icon>
              </div>
              <div class="item-label">教练评分</div>
            </div>
            <div class="action-item" @click="goToFeedbackList">
              <div class="item-icon" style="background-color: #67c23a;">
                <el-icon><Comment /></el-icon>
              </div>
              <div class="item-label">意见反馈</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import type { CourseReview, Feedback } from '@/types/api/review'

// 路由
const router = useRouter()

// 数据相关
const courseReviewCount = ref(0)
const coachRatingCount = ref(0)
const feedbackCount = ref(0)
const pendingFeedbackCount = ref(0)
const processingFeedbackCount = ref(0)
const resolvedFeedbackCount = ref(0)
const bugFeedbackCount = ref(0)
const featureFeedbackCount = ref(0)
const complaintFeedbackCount = ref(0)
const suggestionFeedbackCount = ref(0)
const recentReviews = ref<CourseReview[]>([])
const featuredReviews = ref<CourseReview[]>([])

// 刷新数据
const refreshData = async () => {
  // 模拟数据
  courseReviewCount.value = 156
  coachRatingCount.value = 89
  feedbackCount.value = 25
  pendingFeedbackCount.value = 5
  processingFeedbackCount.value = 3
  resolvedFeedbackCount.value = 15
  bugFeedbackCount.value = 2
  featureFeedbackCount.value = 8
  complaintFeedbackCount.value = 3
  suggestionFeedbackCount.value = 12

  // 模拟最近评价
  recentReviews.value = [
    {
      id: 1,
      courseId: 1,
      userId: 123,
      user: {
        id: 123,
        name: '张三',
        avatar: 'https://cdn.example.com/avatars/123.jpg'
      },
      rating: 5,
      content: '课程非常棒，教练很专业！',
      images: [],
      tags: ['专业', '耐心'],
      isAnonymous: false,
      isFeatured: false,
      helpfulCount: 15,
      isHelpful: false,
      status: 'APPROVED',
      createdAt: '2025-10-25T18:30:00Z',
      replies: []
    },
    {
      id: 2,
      courseId: 2,
      userId: 124,
      user: {
        id: 124,
        name: '李四',
        avatar: 'https://cdn.example.com/avatars/124.jpg'
      },
      rating: 4,
      content: '环境很好，课程安排合理',
      images: [],
      tags: ['环境好'],
      isAnonymous: false,
      isFeatured: false,
      helpfulCount: 8,
      isHelpful: false,
      status: 'APPROVED',
      createdAt: '2025-10-24T15:20:00Z',
      replies: []
    }
  ]

  // 模拟精选评价
  featuredReviews.value = [
    {
      id: 3,
      courseId: 1,
      userId: 125,
      user: {
        id: 125,
        name: '王五',
        avatar: 'https://cdn.example.com/avatars/125.jpg'
      },
      rating: 5,
      content: '这是我上过的最好的健身课程，教练非常专业，环境也很棒！强烈推荐给大家。',
      images: [],
      tags: ['专业', '环境好', '推荐'],
      isAnonymous: false,
      isFeatured: true,
      helpfulCount: 25,
      isHelpful: false,
      status: 'APPROVED',
      createdAt: '2025-10-20T10:15:00Z',
      replies: []
    },
    {
      id: 4,
      courseId: 3,
      userId: 126,
      user: {
        id: 126,
        name: '赵六',
        avatar: 'https://cdn.example.com/avatars/126.jpg'
      },
      rating: 5,
      content: '教练很有耐心，针对我的身体状况制定了合适的训练计划，效果很明显！',
      images: [],
      tags: ['耐心', '有效果'],
      isAnonymous: false,
      isFeatured: true,
      helpfulCount: 18,
      isHelpful: false,
      status: 'APPROVED',
      createdAt: '2025-10-18T14:30:00Z',
      replies: []
    }
  ]
}

// 跳转到课程评价列表
const goToCourseReviewList = () => {
  router.push('/review/course')
}

// 跳转到教练评分列表
const goToCoachRatingList = () => {
  router.push('/review/coach')
}

// 跳转到意见反馈列表
const goToFeedbackList = () => {
  router.push('/review/feedback')
}

// 跳转到评价列表
const goToReviewList = () => {
  router.push('/review/course')
}

// 格式化时间
const formatTime = (time: string) => {
  if (!time) return ''
  const date = new Date(time)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const minutes = Math.floor(diff / (1000 * 60))
  const hours = Math.floor(diff / (1000 * 60 * 60))
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (minutes < 1) return '刚刚'
  if (minutes < 60) return `${minutes}分钟前`
  if (hours < 24) return `${hours}小时前`
  if (days < 30) return `${days}天前`
  return date.toLocaleDateString()
}

// 格式化状态
const formatStatus = (status: string) => {
  const statusMap: Record<string, string> = {
    'PENDING': '待审核',
    'APPROVED': '已通过',
    'REJECTED': '已拒绝',
    'HIDDEN': '已隐藏'
  }
  return statusMap[status] || status
}

// 获取状态标签类型
const getStatusTagType = (status: string) => {
  const typeMap: Record<string, string> = {
    'PENDING': 'warning',
    'APPROVED': 'success',
    'REJECTED': 'danger',
    'HIDDEN': 'info'
  }
  return typeMap[status] || 'info'
}

// 生命周期
onMounted(() => {
  refreshData()
})
</script>

<style scoped>
.review-center {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.summary-content {
  padding: 20px 0;
}

.summary-item {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  transition: all 0.3s;
}

.summary-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.item-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
}

.item-icon .el-icon {
  font-size: 24px;
  color: white;
}

.item-info {
  flex: 1;
}

.item-value {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
}

.item-label {
  font-size: 14px;
  color: #909399;
}

.reviews-list {
  max-height: 400px;
  overflow-y: auto;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #ebeef5;
}

.review-item:last-child {
  border-bottom: none;
}

.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.item-user {
  font-weight: bold;
}

.item-content {
  font-size: 14px;
  color: #606266;
  margin-bottom: 10px;
  line-height: 1.5;
}

.item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.feedback-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.stat-item {
  text-align: center;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 5px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
}

.feedback-types .type-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ebeef5;
}

.feedback-types .type-item:last-child {
  border-bottom: none;
}

.type-label {
  font-size: 14px;
}

.type-count {
  font-weight: bold;
}

.empty {
  text-align: center;
  padding: 40px 0;
  color: #909399;
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
  background-color: #f5f7fa;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s;
}

.action-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.action-item .item-icon {
  width: 40px;
  height: 40px;
  margin-right: 0;
  margin-bottom: 10px;
}

.action-item .item-label {
  font-size: 14px;
  color: #606266;
}
</style>
